<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测量距离</title>
  <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.1/minemap.css">
  <script src="http://minedata.cn/minemapapi/v1.1/minemap.js"></script>
  <script src="http://minedata.cn/minemapapi/demo/js/MapXMLHttpRequest.js"></script>
  <style>

    html, body, #map {
      width: 100%;
      height: 100%;
    }

    html, body {
      margin: 0;
      padding: 0;
    }

    .distance-container {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1;
    }

    .distance-container > * {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 11px;
      line-height: 18px;
      display: block;
      margin: 0;
      padding: 5px 10px;
      border-radius: 3px;
    }

  </style>
</head>

<body>
<div id='map'></div>
<div id='distance' class='distance-container'></div>

<script>
  minemap.accessToken = '0b871b483cfb42a7b0dd73b5f78792e8';
  minemap.solution = 66;
  var map = new minemap.Map({
    container: 'map',
    style: "http://minedata.cn/service/solu/style/id/66",
    center: [109.850705, 40.657452],
    zoom: 12,
    pitch: 0
  });

  var measureDistance = new minemap.MeasureDistanceTool(map)
  var distanceContainer = document.getElementById('distance');
  var geojson = measureDistance.geojson
  var search_geojson = {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": []
    }
  };
  var linestring = measureDistance.linestring
  var myHttp = new MapXMLHttpRequest()
  var serviceAdd = "http://123.207.124.207:8084/minemap-server/service/search/"
  var url_middle = "around?&token=2werewrewrrwe&"


  function search(location,type,radius,count) {

//    around?&token=2werewrewrrwe&location=109.82088893651962,40.65754026005965&type=cross&radius=150&count=10
    location= location ? [location.lng,location.lat ]: [109.82088893651962,40.65754026005965]
    type= type ? type : "cross"
    radius=radius ? radius : 150
    count= count ? count : 10
    var url = serviceAdd+url_middle+"location="+location+"&type="+type+"&radius="+radius+"&count="+count
    console.log(url)
    myHttp.send("GET", url, '', callback, null)

  }


  function callback(responseText, responseXML) {
    //{"errcode":0,"errmsg":null,"data":{"pageCount":0,"totalCount":0,"pageNumber":0,"rows":[]}}
    var searchResult = {}
    if (responseText.length > 1) {
      searchResult = JSON.parse(responseText)
      if (searchResult.errcode == 0 && searchResult.data.rows.length > 0) {
        console.log("get call back")
        console.log(searchResult)
        var resGeojson = translateRes2Geojson(searchResult)
        var endLine = document.createElement('endLine');
        var temData = ""
        if (searchResult.data.rows) {
            searchResult.data.rows.forEach(function (res) {
              temData += ( res.type + " : " + res.name )
          })
          endLine.textContent = '数据有：' + temData + "\n"
          distanceContainer.appendChild(endLine);
        }
      }
    }

  }
  function translateRes2Geojson(response) {

    response.data.rows.forEach(function (point) {
      var poi = {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": []
        },
        "properties": ""
      }
      poi.geometry = point.geom
      poi.properties = point;
      search_geojson.data.features.push(poi)
    })

    console.log(search_geojson)
    return search_geojson
  }

//  map.on('load', function () {
//    measureDistance.startMeasure(map)
//  });
  map.on('click', function (e) {
//    var features = map.queryRenderedFeatures(e.point, {layers: ['measure-points']});
//    distanceContainer.innerHTML = '';
//    measureDistance.pushPointFeatures(e, features);
//    var points = document.createElement('allPoints');
//    var allPoints = measureDistance.getAllPoints();
//    points.textContent = '所有的点有：' + allPoints;
//    distanceContainer.appendChild(points);

    search(e.lngLat,"cross",450,10)
    search(e.lngLat,"road",450,10)

  });

  map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point, {layers: ['measure-points']});
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : 'crosshair';
  });

  document.getElementById("map").addEventListener("contextmenu", function () {
    document.getElementById("distance").innerHTML = "数据已清空";
    measureDistance.clear()
  });
</script>

</body>
</html>

